<template>
  <div>
    <el-row>
      <el-col :span="12">
        <el-button size="mini" @click="add('form')" type="success">新增</el-button>
        <el-button size="mini" @click="update" type="info">修改</el-button>
        <el-button size="mini" @click="del" type="danger">删除</el-button>
      </el-col>
      <el-col :span="12"></el-col>
    </el-row>
    <!-- {{cnlist}} -->
    <el-table :data="cnlist"  border style="width: 100%;margin-top:10px" max-height="500px"  @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="index" label="序号" width="300px"></el-table-column>
      <el-table-column prop="tit" label="商品集合">
        <template slot-scope="scope">
          <el-button size="mini" @click="look( scope.row.id,scope.$index)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="二级标题"></el-table-column>
      <el-table-column prop="classify" label="类别"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit( scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer size="40%" :title="title" :visible.sync="drawer" :direction="direction">
      <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
        <el-form-item label="二级标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="类别" prop="cid">
          <el-select v-model="form.cid" placeholder="请选择类别">
            <el-option
              v-for="(item,index) in calist"
              :key="index"
              :label="item.classify"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('form')">{{title}}</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-dialog title="商品集合" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>
        <el-form :model="forme" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="请选择在此类别下的商品">
            <el-select v-model="forme.cnd" multiple placeholder="请选择类别">
              <el-option
                v-for="(item,index) in three"
                :key="index"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <!-- <template slot-scope="scope"> -->
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>

        <!-- </template> -->
      </span>
    </el-dialog>
    <!-- <el-pagination
      class="top"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 3, 5, 10]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total.total"
    ></el-pagination> -->
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      drawer: false,
      direction: "rtl",
      title: "新增",
      arr: [],
      form: {},
      forme: {},
      tit: 0,
      currentPage: 1,
      dialogVisible: false,
      rules: {
        title: [
          { required: true, message: "请输入标题名称", trigger: "blur" },
          {
            min: 3,
            max: 15,
            message: "长度在 3 到 15 个字符",
            trigger: "blur",
          },
        ],
        cid: [{ required: true, message: "请选择活动区域", trigger: "change" }],
      },
    };
  },
  methods: {
    ...mapActions("content", [
      "getLists",
      "addLists",
      "updateLists",
      "deleteLists",
      "shoop",
      "getListsfirst"
    ]),
    ...mapMutations("content", ["SET_CURRENT", "SET_PAGESIZE"]),
    ...mapActions("classify", ["getListss"]),
    //新增
    async add() {
      this.drawer = true;
      // await this.resetForm()
      this.form = {};
      this.title = "新增";
    },
    //弹框确定
    async sure() {
      this.forme.id = this.tit;
      await this.shoop(this.forme);
      this.dialogVisible = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //修改
    handleEdit(row) {
      console.log(row);
      this.form = row;
      this.form.cid = row.classify;
      this.drawer = true;
      this.title = "修改";
    },
    //查看
    async look(id, val) {
      this.tit = id;
      this.dialogVisible = true;
      console.log(val);
      let vl =await this.cnlist[val].tids.split(",");
      let arr = [];
      vl.forEach((v) => {
        arr.push(v * 1);
      });
      if (this.forme.cnd) {
        this.forme.cnd = arr;
      }
    },
    //外部删除
    del() {
      if (this.arr.length == 0) {
        this.$message("请选择要删除的项");
      } else {
        let lrr = [];
        this.arr.forEach((v) => {
          lrr.push(v.id);
        });
        this.handleDelete(lrr.join(","));
      }
    },
    //删除
    handleDelete(index) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.deleteLists(index);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // await this.getLists();
    },
    //外部修改
    update() {
      if (this.arr.length != 1) {
        this.$message("请选择一项修改");
        return;
      } else {
        this.handleEdit(this.arr[0]);
      }
    },
    //复选框
    handleSelectionChange(val) {
      this.arr = val;
    },
    //确定
    submitForm(formName) {
      if (this.form.id) {
        this.$message({
          message: "恭喜你，修改成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "恭喜你，新增成功",
          type: "success",
        });
      }
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.form.id) {
            // console.log('修改');
            await this.updateLists(this.form);
          } else {
            // console.log(this.form);
            await this.addLists(this.form);
          }
          await await this.getLists();
        } else {
          this.$refs[formName].resetFields();
          // this.$message("标题长度在 3 到 15 个字符");
          return false;
        }
      });
      this.drawer = false;
    },
    resetForm(formName) {
      this.drawer = false;
      this.$refs[formName].resetFields();
    },
    //分页
    async handleSizeChange(val) {
      await this.SET_PAGESIZE(val);
      await this.getLists();
      // console.log(`每页 ${val} 条`);
    },
    async handleCurrentChange(val) {
      await this.SET_CURRENT(val);
      await this.getLists();
      // console.log(`当前页: ${val}`);
    },
  },
  computed: {
    ...mapState("content", ["cnlist", "total", "pageSize", "three"]),
    ...mapState("classify", ["calist"]),
  },
  mounted() {
    console.log(this.calist);
    this.getLists();
    this.getListss();
    this.getListsfirst()
  },
};
</script>

<style >
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.top {
  margin-top: 10px;
}
</style>
